<template>
    <div class="gd-main">
        <div class="md-wrap">
            <!-- 手机号 -->
            <div class="md-item_text">
                <!-- 手机号输入框 -->
                <van-field 
                    v-model="form.phone"
                    type="tel"
                    placeholder="手机号码"
                    maxlength="11"
                    style="border:1px solid #eee;border-right:none;height:44px;"
                ><svg-icon slot="left-icon" icon-class="mobile-phone" /></van-field>
                <!-- 验证码按钮 -->
                <van-button
                    v-touch.tap="sendCodeHandle"
                    style="width:3rem;background-color:#f79615;border:none;"
                    type="info"
                    :disabled="btnYzm.disabled"
                >{{btnYzm.text}}</van-button>
            </div>
            <!-- 短信验证码 -->
            <div class="md-item_text">
                <van-field 
                    v-model="form.code" 
                    type="digit"
                    placeholder="请输入短信验证码"
                    style="border:1px solid #eee;border-right:none;height:44px;"
                ><svg-icon slot="left-icon" icon-class="password" /></van-field>
            </div>
            <!-- 确认按钮 -->
            <div class="md-item_text">
                <van-button 
                    v-touch.tap="submitHandle" 
                    :disabled="btnSubmit.disabled"
                    type="info"
                    style="background-color:#f79615;border:none;flex-grow:1;">确认</van-button>
            </div>
        </div>
    </div>
</template>

<script>
    import {Button,Field} from 'vant';
    //验证码请求
    import {sendCode,checkCode} from '@/request/authentication';
    
    export default {
        //认证
        name: 'authentication',
        data(){
            return {
                form:{
                    phone:'',
                    code:''
                },
                // 验证码配置
                btnYzm:{
                    text:'获取验证码',
                    loading:false,
                    disabled:false,
                    time:60,
                    cid:null
                },
                //提交按钮配置
                btnSubmit:{
                    disabled:false
                }
            }
        },
        methods:{
            //1s 倒计时
            timerun(){
                this.btnYzm.time = 60;
                this.btnYzm.disabled = true;
                this.btnYzm.cid = setInterval(() => {
                    let text = '';
                    if(this.btnYzm.time <= 0){
                        //接触禁用
                        this.btnYzm.disabled = false;
                        //清除引用
                        clearInterval(this.btnYzm.cid);
                        //还原文本
                        text = '获取验证码';
                    }else{
                        this.btnYzm.time--;
                        text = this.btnYzm.time + 's';
                    }
                    this.btnYzm.text = text;
                },1000);
            },
            // 发送验证码
            sendCodeHandle(){
                // 禁用
                if(this.btnYzm.disabled) return;
                
                //校验
                if(!/\d{11}/.test(this.form.phone)){
                    this.$toast('请输入11位号码');
                    return;
                }
                
                let query = this.objToString(this.form,['phone']);
                
                sendCode(query).then(res => {
                    this.$toast(res.entry.msg);

                });
                // 禁用按钮开始读秒
                this.timerun();
            },
            // 提交表单
            submitHandle(){
                // 禁用
                if(this.btnSubmit.disabled) return;
                
                // 校验
                if(this.form.code.length == 0){
                    this.$toast('验证码不能为空');
                    return;
                }
                
                let query = this.objToString(this.form,['phone','code']);
                
                // 成功后跳转
                checkCode(query).then(res => {
                    let qs = this.getQueryStringArgs(),
                        to = {},
                        query = {};
                    
                    to.path = qs.projectId ? '/checkIn2' : '/checkIn';

                    if(qs.projectId){
                        to.query = {
                            projectId:qs.projectId
                        }
                    }

                    // 告知用户
                    this.$notify({ 
                        type: 'success',
                        message: '验证成功',
                        duration:1000,
                        onClose:() => {
                            this.$router.replace(to);
                        }
                    });
                // 解除禁用
                }).catch(() => {
                    this.btnSubmit.disabled = false;
                });
                
                this.btnSubmit.disabled = true;
            }
        },
        components:{
            [Button.name]:Button,
            [Field.name]:Field
        }
    }
</script>

<style lang="less" scoped>

.gd-main{
    width:100vw;
    height:100vh;
    background-image:url(../assets/image/bg-login-1.jpg);
    background-size:100% 100%;
    overflow:hidden;overflow-y:auto;
}
.md-wrap{
    background-color:#fff;
    border-radius:.1rem;padding:.5rem 0;margin:4.4rem .3rem 0;
}
.md-item_base{
    margin:.1rem .3rem;
    display:flex;
    
}
.md-banner{
    margin:0;height:2rem;
    img{
        width:100%;height:100%;
    }
}
.md-item_text:extend(.md-item_base){
    justify-content:center;
}
</style>